/* eslint-disable no-use-before-define */
import React, { PureComponent } from 'react';
import {
    View,
    Text,
    SectionList,
    StyleSheet
} from 'react-native';
import { observer, inject } from 'mobx-react'
import { Container, ListFooterComponent, Loading } from '../../component'
import { Actions } from 'react-native-router-flux';
import TodoItem from './component/TodoItem';
import config from '../../config';

@inject('todoStore')
@observer
export default class Todo extends PureComponent {

    constructor(props) {
        super(props)
        this.props.todoStore.userLogin()
    }

    _renderItem(item) {
        return (
            <TodoItem
                {...item}
                onPress={() => {
                    this.props.todoStore.updateTodo(item.objectId)
                }} />
        )
    }

    render() {
        const { todoStore } = this.props
        return (
            <Container
                naviBarProps={{
                    title: '任务列表',
                    leftElement: null,
                }}>

                <SectionList
                    keyExtractor={(item, index) => item.objectId}
                    ListFooterComponent={() => <ListFooterComponent haMore={false} />}
                    renderItem={({ item, index, section }) => this._renderItem(item)}
                    renderSectionHeader={({ section: { title } }) => (
                        <Text style={styles.title}>{title}</Text>
                    )}
                    sections={todoStore.todoList}
                    stickySectionHeadersEnabled={false}
                    style={{ flex: 1, }}
                />

                <Loading isLoading={todoStore.todoList.length == 0} />
            </Container>
        )
    }
}

const styles = StyleSheet.create({
    userAvatar: {
        width: 28,
        height: 28,
        borderRadius: 14,
    },
    title: {
        padding: 15,
        fontWeight: 'bold',
        fontSize: config.bigFontSize,
    },
});